Day10: 使用本地存儲在 React 中保持狀態

在React開發中，我們經常需要保持應用程序的狀態，以便在刷新頁面或重新載入應用程序時不丟失數據。本篇文章將介紹如何使用localStorage和React的useState和useEffect hook來實現這一目標。

使用 localStorage 來保持狀態
在React應用程序中，我們可以使用localStorage來在瀏覽器中存儲數據。這允許我們在刷新頁面或重新載入應用程序時保持狀態。以下是一個簡單的範例：

import React, { useState, useEffect } from 'react';

function App() {
  // 使用 localStorage 中的 count 值初始化狀態
  const initialCount = parseInt(localStorage.getItem('count')) || 0;
  const [count, setCount] = useState(initialCount);

  // 監聽 count 狀態的變化，並將其保存到 localStorage
  useEffect(() => {
    localStorage.setItem('count', count.toString());
  }, [count]);

  const handleIncrement = () => {
    // 使用閉包確保能夠獲取到最新的 count 值
    setCount(prevCount => prevCount + 1);
  };

  const handleDecrement = () => {
    // 使用閉包確保能夠獲取到最新的 count 值
    setCount(prevCount => prevCount - 1);
  };

  return (
    <div className='countContainer'>
      <p>Count: {count}</p>
      <button onClick={handleIncrement} className='add'>
        增加
      </button>
      <button onClick={handleDecrement} className='subtract'>
        減少
      </button>
    </div>
  );
}

export default App;

我們使用localStorage來存儲和讀取count的值，並使用useState和useEffect來實現狀態管理和數據的同步。

保持狀態在React應用程序中是一個重要的議題，特別是在處理刷新頁面或重新載入應用程序的情況下。通過使用localStorage和React的hook，我們可以輕鬆實現這一目標，確保用戶的數據不會丟失。這是React應用程序開發中的一個實用技巧，希望對您有所幫助！